<template>
  <div class="app-container">
    <div class="zd3">
      <div class="zd3-title">
        <p>
          <span>位号</span>
          <input v-model="seachData.bitNumber" type="text" placeholder="请输入位号" />
        </p>
        <p>
          <span>设备名称</span>
          <input v-model="seachData.commodityName" type="text" placeholder="请输入设备名称" />
        </p>
        <p>
          <span>状态</span>
          <el-select v-model="seachData.states" placeholder="请选择状态" class="userselect">
            <el-option
              v-for="item in staticlist"
              :key="item.static"
              :label="item.label"
              :value="item.static"
            ></el-option>
          </el-select>
        </p>
        <h3 @click="search">查询</h3>
        <h4 @click="resetList">重置</h4>
        <h3 @click="addPeople" style="background: #0093FF">新增</h3>
        <el-upload
          class="upload-demo"
          action=""
          :show-file-list="false"
          :http-request="designUpFile"
          :multiple='false'
          >
          <el-button size="small" type="primary">导入</el-button>
        </el-upload>
      </div>
      <div class="zd3-btm">
        <!-- 一级列表分类 -->
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          height="100%"
          v-loading="load"
          @expand-change="changtable"
        >
          <el-table-column label="状态" align="center" width="80">
            <template slot-scope="scoped">
							<div style="width: 80px;" class="orderStatus" @click="changeStatus(scoped.row)">
								<p v-if="scoped.row.states == 0" class="yellow">未提交</p>
								<p v-if="scoped.row.states == 1" class="blue">审批中</p>
								<p v-if="scoped.row.states == 2" class="blue">采购中</p>
								<p v-if="scoped.row.states == 3" class="green">入库</p>
								<p v-if="scoped.row.states == 4" class="blue">出库</p>
								<p v-if="scoped.row.states == 5" class="green">运行</p>
								<p v-if="scoped.row.states == 6" class="blue">维修</p>
								<p v-if="scoped.row.states == 7" class="red">报废</p>
								<p v-if="scoped.row.states == 8" class="red">驳回</p>
								<p v-if="scoped.row.states == 9" class="yellow">未使用</p>
								<!-- <p class="green">运行</p> -->
							</div>
            </template>
          </el-table-column>
          <el-table-column label="设备名称" width="150" align="center" prop="commodityName"></el-table-column>
          <el-table-column label="编号" align="center" prop="bitNumber"></el-table-column>
          <el-table-column label="数量" width="80" align="center" prop="number"></el-table-column>
          <el-table-column label="单位" width="80" align="center" prop="nuit"></el-table-column>
          <el-table-column label="尺寸" width="80" align="center" prop="model"></el-table-column>
          <el-table-column label="重量" width="80" align="center" prop="allkg"></el-table-column>
          <el-table-column label="厂家" width="150" align="center" prop="brand"></el-table-column>
          <el-table-column label="固定资产编号" width="110" align="center" prop="assetnumber"></el-table-column>
          <el-table-column label="承包人" align="center" prop="rateOfWork"></el-table-column>
          <!-- <el-table-column label="位号" align="center" prop="bitNumber"></el-table-column> -->
          <el-table-column label="责任人" align="center" prop="maintainPerson"></el-table-column>
          <el-table-column label="是否定期检修" width="110" align="center" prop="isRepair"></el-table-column>
          <el-table-column label="定期检修周期" width="110" align="center" prop="repairPeriod"></el-table-column>
          <el-table-column label="润滑方式" width="110" align="center" prop="lubrication"></el-table-column>
          <el-table-column label="保养类型" width="110" align="center" prop="texture"></el-table-column>
          <el-table-column label="部门" align="center" prop="departments"></el-table-column>
          <el-table-column label="安装时间" align="center" prop="installtime"></el-table-column>
          <el-table-column label="使用时间" align="center" prop="usetime"></el-table-column>
          <el-table-column label="图片" align="center" width="120">
            <template slot-scope="scope">
              <img :src="scope.row.imgurl" class="shebei" />
            </template>
          </el-table-column>
          <el-table-column label="二维码" align="center" width="120">
            <template slot-scope="scope">
              <img :src="scope.row.erweima" class="shebei" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="250" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="wanshan(scope.row,scope.$index)">修改</el-button>
              <el-popconfirm
                placement="top"
                hideIcon
                title="是否要删除此行？"
                @onConfirm="deleteRow(scope.row)"
              >
                <el-button type="text" size="small" slot="reference">删除</el-button>
              </el-popconfirm>
              <el-popover placement="bottom" width="160">
                <div class="morehandle">
                  <!-- <el-button type="text" size="small" @click="wanshan(scope.row)">完善</el-button> -->
									<el-button type="text" size="small" @click="lookdetail(scope.row)">查看详情</el-button>
                  <el-button type="text" size="small" v-if="scope.row.states != 9" @click="goRepair(scope.row,scope.$index)">设备维修</el-button>
                  <el-button
                    type="text"
                    size="small"
                    v-if="!scope.row.erweima"
                    @click="getEwm(scope.row)"
                  >生成二维码</el-button>
                  <el-button
                    type="text"
                    size="small"
                    v-if="scope.row.erweima"
                    @click="dayin(scope.row)"
                  >打印二维码</el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="addChildren(scope.row,scope.$index)"
                  >添加子设备</el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="lookChildren(scope.row,scope.$index)"
                  >查看子设备</el-button>
                </div>
                <el-button type="text" size="mini" slot="reference">
                  更多操作
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          v-if="!load"
          align="right"
          layout="prev,pager,next"
          :current-page="seachData.currentPage"
          :page-size="50"
          :total="total"
          @prev-click="goPrev"
          @next-click="goNext"
          @current-change="goPage"
        />
        <!-- <div class="ifyPage">
          <el-button size="small" :disabled="seachData.currentPage <= 0" type="primary" @click="goPrev">上一页</el-button>
          <el-button size="small" :disabled="nomore" type="primary" @click="goNext">下一页</el-button>
        </div> -->
      </div>
    </div>
    <!-- 打印二维码 -->
    <el-dialog
      :visible.sync="ewmShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :modal="true"
      width="70"
    >
      <div id="ewmdayin">
        <img :src="ewmimg" alt />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ewmShow = false">取消</el-button>
        <el-button type="primary" v-print="'#ewmdayin'">打印</el-button>
      </div>
    </el-dialog>
		<!-- 修改状态 -->
    <el-dialog
      :visible.sync="showStatus"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :modal="true"
			title="更改状态"
      width="40%"
    >
			<div class="orderStatus1">
				<p @click="choseStatus(item.static)" v-for="(item,index) in staticlist" :key="index" :class="item.static == 5 ? 'green' : item.static == 6 ? 'blue': item.static == 7 ? 'red' : 'yellow'">
					{{item.static == 5 ? '运行': item.static == 6 ? '维修' : item.static == 7 ? '报废': '未使用'}}
				</p>
			</div>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="showStatus = false">取消</el-button>
        <el-button type="primary">确定</el-button>
      </div> -->
    </el-dialog>
    <!-- 添加一级分类设备 -->
    <el-dialog
      :visible.sync="childrenShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :modal="true"
      width="70%"
    >
      <div class="change">
        <p>
          <span>厂家</span>
          <input type="text" v-model="tempData.brand" placeholder="请输入厂家" />
        </p>
        <p>
          <span>设备名称</span>
          <input type="text" v-model="tempData.commodityName" placeholder="请输入设备名称" />
        </p>
				<p>
        <span>设备部门</span>
					<el-select v-model="tempData.departments" placeholder="请选择设备部门" class="userselect">
						<el-option
							v-for="item in ifydata"
							:key="item.id"
							:label="item.departments"
							:value="item.departments"
						></el-option>
					</el-select>
				</p>
        <p>
          <span>单位</span>
          <input type="text" v-model="tempData.nuit" placeholder="请输入计量单位" />
        </p>
        <p>
          <span>数量</span>
          <input type="number" v-model="tempData.number" placeholder="请输入数量" />
        </p>
        <p>
          <span>备注</span>
          <input type="text" v-model="tempData.remarks" placeholder="请输入备注" />
        </p>
        <p>
          <span>尺寸</span>
          <input type="text" v-model="tempData.model" placeholder="请输入尺寸" />
        </p>
        <!-- <p>
          <span>参数</span>
          <input type="text" v-model="tempData.parameters" placeholder="请输入参数" />
        </p> -->
        <p>
          <span>图片</span>
          <el-upload
            class="avatar-uploader"
            action
            :http-request="designUpAvatar"
            :show-file-list="false"
          >
            <img v-if="tempData.imgurl" :src="tempData.imgurl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="childrenShow = false">取消</el-button>
        <el-button type="primary" @click="updateOne">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDepartment,
  updateDepartment,
  addDepartment,
  deleteDepartment,
  getChildrenDepartment,
  deleteChildrenDepartment,
  bumenScEwm,
  importFile
} from "@/api/bumen";
import { uploadFile,getBumenNew } from "@/api/people";
import { mapGetters } from 'vuex'
let currentP = null
export default {
  data() {
    return {
      ewmShow: false,
      total: 1,
      tableData: [],
      childrenData: {},
      dialogVisible: false,
      childrenShow: false,
      tempData: {}, //修改对象
      seachData: {
        currentPage: 1
      }, //查询对象
      nomore: false,
      ewmimg: "", //ewm打印
      tempIndex: -1,
			load: true,   //加载动画
			ifydata: [],  //部门分类
			showStatus: false,
			staticlist: [{
        static: '5',
        label:'运行'
      },{
        static: '6',
        label:'维修'
      },{
        static: '7',
        label:'报废'
      },{
        static: '9',
        label:'未使用'
      }]
    };
	},
	computed:{
		...mapGetters([
			'userInfo'
		])
	},
  mounted() {
		console.log('params',this.$route.params)
    if(this.$route.params){
      currentP = this.$route.params.devicePage
      this.goPage(this.$route.params.devicePage)
    }else{
      this.search();
    }
		this.bumenList();
    // this.searchChildren();
  },
  methods: {
    // 导入excel
    designUpFile(item) {
      console.log('新增文档')
      const loading = this.$loading({
        lock: true,
        text: '上传中请稍等...',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.8)'
      })
      console.log(item)
      var formData = new FormData()
      formData.append("file", item.file)
      importFile(formData).then(res => {
        console.log(res)
        loading.close()
        this.search()
      })
    },
    changtable(row) {
      console.log(row);
		},
		changeStatus(item){
			console.log(item)
			this.tempData = {...item}
			this.showStatus = true
			this.staticlist = this.staticlist.filter(item => item.static != item.states)
		},
		// 选择要改变的状态
		choseStatus(item){
			console.log(item)
			this.tempData.states = item
			updateDepartment(this.tempData).then(res => {
				console.log(res);
				this.$message({
					message: res.message,
					type: "success"
				});
				this.search();
				this.showStatus = false
			});
		},
		lookdetail(item){
			console.log(item)
			this.$router.push({
				name: 'LookEleOneclass',
				params: {
					options: JSON.stringify(item)
				}
			})
		},
		// 部门列表
    bumenList(){
      getBumenNew({}).then(res => {
        console.log(res)
        // res.data.map(item => {
				// 	item.value = item.departments
				// 	return item
				// })
				let temp = res.data.filter(item => item.ids === '456')[0].departmentsList
        console.log(temp)
        this.ifydata = temp;
      })
		},
		shouMore(){
			this.more = !this.more
		},
    // 修改一级分类
    write(item, index) {
      console.log(item);
      this.tempIndex = index;
      this.tempData = { ...item };
      this.childrenShow = true;
    },
    // 增加修改一级分类
    updateOne() {
      if (this.tempIndex == -1) {
        this.tempData.ptype = 'dianqi'
				this.tempData.states = 9
        addDepartment(this.tempData).then(res => {
					console.log('一级分类',res)
          this.$message({
            message: res.message,
            type: "success"
          });
          this.$router.push({
						name: "WanshanEle",
						params: {
							options: JSON.stringify(res.data),
							type: "one"
						}
					});
        });
      } else {
        updateDepartment(this.tempData).then(res => {
          console.log(res);
          this.$message({
            message: res.message,
            type: "success"
          });
          this.search();
        });
      }
      this.childrenShow = false;
    },
    // 搜索设备
    search(item) {
      console.log("搜索");
			const user = this.userInfo;
      console.log('user',user)
      this.load = true
			// 判断是否是超级管理员，超级管理员查看所有部门列表
			if(user.roleList[0].roleName != 'superAdmin'){
				this.seachData.departments = user.departments
      }
      this.seachData.ptype = 'dianqi'
      getDepartment(this.seachData).then(res => {
        console.log('res',res);
        // if(res.data.length == 0){
        //   this.nomore = true
        //   this.seachData.currentPage -= 50
        // }else if(res.data.length < 50){
        //   this.nomore = true
        //   this.tableData = res.data
        // }else{
        //   this.tableData = res.data
        //   this.nomore = false
        // }
        this.tableData = res.data.list
        this.total = res.data.total
        this.load = false
        if(currentP){
          console.log('不等于-1')
          this.seachData.currentPage = currentP
          console.log(this.seachData.currentPage)
          currentP = null
        }
        console.log(this.seachData.currentPage)
      }).catch(res => {
        this.load = false
      })
    },
    dayin(item) {
      console.log(item);
      this.ewmShow = true;
      this.ewmimg = item.erweima;
      // this.visible = false
    },
    // handleDayin(){
    // 	let print = document.getElementsByClassName("ewmdayin")[0]  //获取目标区域的HTML结构
    // 	myprint(print)
    // },
    // 搜索操作
    handleSearch() {
      this.search();
      this.searchShow = false;
    },
    // 完善一级分类
    wanshan(item) {
      console.log(item);
      this.$router.push({
        name: "WanshanEle",
        params: {
          options: JSON.stringify(item),
          type: "one"
        }
      });
      sessionStorage.setItem('devicePage',this.seachData.currentPage)
    },
    // 完善二级分类
    wanshanChildren(item) {
      console.log(item);
      this.$router.push({
        name: "WanshanEle",
        params: {
          options: JSON.stringify(item),
          type: "two"
        }
      });
    },
    // 跳转子分类修改
    writeChildren(item) {
      this.$router.push({
        name: "WriteEleList",
        params: {
          options: JSON.stringify(item)
        }
      });
    },
    // 查看子设备
    lookChildren(item) {
      // console.log(item)
      this.$router.push({
        name: "LookElechildren",
        params: {
          options: JSON.stringify(item)
        }
      });
    },
    // 删除子设备
    // deleteChildren(item) {
    //   deleteChildrenDepartment(item.id).then(res => {
    //     console.log(res);
    //     this.$message({
    //       message: res.message,
    //       type: "success"
    //     });
    //     this.search();
    //   });
    // },
    // 上传头像
    designUpAvatar(item) {
			const loading = this.$loading({
				lock: true,
				text: '上传中请稍等...',
				spinner: 'el-icon-loading',
			  background: 'rgba(255, 255, 255, 0.8)'
			})
      console.log(this.fileNum);
      var formData = new FormData();
      formData.append("file", item.file);
      uploadFile(formData).then(res => {
				console.log(res)
				loading.close()
        this.$message({
          showClose: true,
          message: "添加成功",
          type: "success"
				})
        // this.imageUrl = res
        this.tempData.imgurl = res;
        this.$forceUpdate();
      }).catch(() =>{
        loading.close()
      })
    },
    // 跳转设备维修
    goRepair(item, index) {
      console.log(item, index);
      this.$router.push({
        name: "RepairEle",
        params: {
          options: JSON.stringify(item)
        }
      });
    },
    // 查询子设备
    // searchChildren(){
    //   getChildrenDepartment({}).then(res => {
    //     console.log(res)
    //   })
    // },
    // 添加子设备(跳转新页面)
    addChildren(item) {
      this.$router.push({
        name: "WriteEleList",
        params: {
          fatherId: item.id
        }
      });
    },
    deleteRow(item) {
      console.log("删除");
      console.log(item);
      deleteDepartment(item.id).then(res => {
        console.log(res);
        this.$message({
          message: res.message,
          type: "success"
        });
        this.search();
      });
    },
    goPrev(page) {
      console.log(page);
      this.load = true
      this.seachData.currentPage --
      this.search()
    },
    goPage(page){
      this.load = true
      this.seachData.currentPage = page
      this.search()
    },
    goNext(page) {
      console.log(page);
      this.load = true
      this.seachData.currentPage ++
      this.search()
    },
    // 生成二维码
    getEwm(item) {
      console.log(item);
      bumenScEwm({ id: item.id }).then(res => {
        console.log(res);
        this.search();
        // this.visible = false
      });
    },
    resetList() {
      this.seachData = {};
    },
    // 添加一级分类
    addPeople(item) {
      this.$router.push({
        name: "WanshanEle"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e !important;
  border-color: #18a05e !important;
}
/deep/.el-button--primary:hover,
.el-button--primary:focus {
  background: #18a05e !important;
  border-color: #18a05e !important;
  color: #fff !important;
}
/deep/.el-button:hover,
.el-button:focus {
  color: #18a05e;
  background-color: transparent;
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e;
  border-color: #18a05e;
}
/deep/.el-button--text {
  color: #00c666 !important;
}
/deep/.el-table__expanded-cell[class*="cell"] {
  padding: 0px 0px 0px 76px;
  background-color: #f5f5f5;
}
/deep/.el-table__expanded-cell:hover {
  background-color: #f5f5f5 !important;
}
/deep/.el-table .cell {
		padding: 0px !important;
}
.morehandle {
  display: flex;
  flex-direction: column;
}
#ewmdayin {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  > img {
    width: 300px;
    height: 300px;
  }
}
.children {
  display: flex;
  // padding-right: 250px;
  position: relative;
  overflow-x: auto;
  align-items: center;
  border-bottom: 1px solid #ddd;
  > p {
    text-align: center;
    padding: 5px 0;
    margin: 0;
    line-height: 32px;
    overflow: hidden;
  }
}
.children-title {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  > p {
    text-align: center;
    padding: 5px 0;
    margin: 0;
    line-height: 32px;
    overflow: hidden;
  }
}
.shebei {
  width: 50px;
  height: 50px;
}
.app-container {
  padding: 10px;
}
.proimg {
  width: 30px;
  height: 30px;
}
.inps {
  width: 100%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  background: none;
  border: none;
  color: #333;
}
.inps-active {
  width: 100%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  // background:#ccc;
  border: none;
  color: #333;
}
.orderStatus {
  display: flex;
  height: 25px;
	line-height: 25px;
	cursor: pointer;
  // justify-content: center;
  > p {
    padding: 0px 5px;
    color: #fff;
    border-radius: 2px;
    margin: 0 auto;
  }
  .blue {
    background: #3a87ad;
  }
  .green {
    background: #18a05e;
  }
  .yellow {
    background: #ff7a0e;
  }
  .red {
    background: #c60000;
  }
}
.orderStatus1 {
  display: flex;
  height: 30px;
	line-height: 30px;
	cursor: pointer;
  // justify-content: center;
  > p {
		cursor: pointer;
    padding: 0px 15px;
    color: #fff;
    border-radius: 3px;
    margin: 0 10px;
  }
  .blue {
    background: #3a87ad;
  }
  .green {
    background: #18a05e;
  }
  .yellow {
    background: #ff7a0e;
  }
  .red {
    background: #c60000;
  }
}


.zd3-title {
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: relative;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);

  > p {
    font-size: 14px;
    color: #333;
    margin-right: 20px;

    > span {
      padding-right: 10px;
    }

    > input {
      width: 180px;
      height: 32px;
      // background: #ccc;
      border-radius: 3px;
      border: 1px solid #ccc;
      padding-left: 10px;
      color: #333;
    }
  }

  > h3 {
    width: 64px;
    height: 32px;
    background: #18a05e;
    border-radius: 3px;
    margin: 0 30px 0 0;
    color: #fff;
    font-size: 14px;
    line-height: 32px;
    font-weight: 100;
    text-align: center;
    cursor: pointer;
  }

  > h4 {
    width: 64px;
    height: 32px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
    font-size: 14px;
    line-height: 32px;
    font-weight: 100;
    text-align: center;
    cursor: pointer;
    margin-right: 30px;
  }
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #18a05e !important;
  color: #fff;
}
.zd3-btm /deep/.btn-prev:after {
  content: "上一页";
}
.zd3-btm /deep/.btn-next:before {
  content: "下一页";
}
.zd3-btm /deep/.btn-prev,
.zd3-btm /deep/.btn-next {
  width: 65px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.app-main::-webkit-scrollbar {display:none}
.zd3-btm {
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
	margin-top: 20px;
	height: 73vh;
  overflow: hidden;
  padding-bottom: 60px;
  &-title {
    display: flex;
    align-items: center;
    height: 70px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    > p {
      text-align: center;
      font-size: 16px;
      color: #333;
    }
  }
  .el-pagination {
    white-space: nowrap;
    padding: 15px 5px;
    color: #303133;
    font-weight: bold;
  }
  .addDate {
    margin: 20px 32px 10px 32px;
    height: 32px;
    border-radius: 3px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border: 1px dashed rgba(0, 0, 0, 0.25);
  }
  .el-button--text {
    margin: 0 15px;
  }
}
.change {
  display: flex;
  flex-wrap: wrap;
  > p {
    width: 50%;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #333;
    /deep/.el-input__inner {
      width: inherit;
      background: none;
      height: 32px;
      // line-height: 32px;
      color: #333;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 25px;
    }
    /deep/.el-input__icon {
      line-height: 32px;
    }
    .userselect {
      // max-width: 250px;
      flex: 1;
    }

    > span {
      display: block;
      width: 120px;
      text-align: right;
      padding-right: 15px;
    }
    > input {
      width: inherit;
      flex: 1;
      height: 32px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 10px;
      color: #333;
    }
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #999 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  border: 1px dashed #ccc;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
